<template>
    <div class="user-management">
        <h1>用户管理页</h1>

        <el-table :data="users" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="100"></el-table-column>
            <el-table-column prop="username" label="用户名" width="150"></el-table-column>
            <el-table-column label="角色" width="200">
                <template v-slot="scope">
                    {{ scope.row.role ? scope.row.role.name : '无' }}
                </template>
            </el-table-column>
            <el-table-column label="状态" width="200">
                <template v-slot="scope">
                    {{ scope.row.status == 1 ? '启用' : '禁用' }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template v-slot="scope">
                    <el-button type="primary" size="small" @click="showUpdateForm(scope.row.id)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button type="success" style="margin-top: 20px" @click="showAddForm">新增</el-button>

        <el-dialog
            :title="currentUser.id ? '编辑用户' : '新增用户'"
            :visible.sync="showSaveForm"
            width="30%"
            @close="resetForm"
        >
            <el-form
                :model="currentUser"
                ref="userForm"
                label-width="80px"
                style="padding: 0 20px"
            >
                <el-form-item label="用户ID">
                    <el-input v-model="currentUser.id" readonly></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="currentUser.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="currentUser.password"></el-input>
                </el-form-item>
                <el-form-item label="角色">
                    <el-select v-model="currentUser.roleId" placeholder="请选择角色">
                        <el-option
                            v-for="role in roles"
                            :key="role.id"
                            :label="role.name"
                            :value="role.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="currentUser.status"
                               active-text="启用"
                               inactive-text="禁用"
                               :active-value="1"
                               :inactive-value="0"></el-switch>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="showSaveForm = false">取消</el-button>
        <el-button type="primary" @click="saveUser">保存</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
// import axios from 'axios';

// Set axios default baseURL
// axios.defaults.baseURL = 'http://localhost:8080';

export default {
    name: 'UserManagement',
    data() {
        return {
            users: [],
            roles: [],
            showSaveForm: false,
            currentUser: {
                id: '',
                username: '',
                roleId: '',
                status: '1',
                password: '',
            },
        };
    },
    created() {
        // Load users and roles when component is created
        this.loadUsers();
        this.$axios
            .get('/role/getall')
            .then(response => {
                if (response.data.success) {
                    this.roles = response.data.data;
                }
            })
            .catch(error => {
                console.error('获取角色列表失败', error);
            });
    },
    methods: {
        loadUsers() {
            this.$axios
                .get('/user/getall')
                .then(response => {
                    if (response.data.success) {
                        this.users = response.data.data;
                    }
                })
                .catch(error => {
                    console.error('获取用户列表失败', error);
                });
        },
        showUpdateForm(id) {
            this.$axios
                .get(`/user/getById/${id}`)
                .then(response => {
                    if (response.data.success) {
                        this.currentUser = { ...response.data.data};
                        this.showSaveForm = true;
                    }
                })
                .catch(error => {
                    console.error('获取用户信息失败', error);
                });
        },
        showAddForm() {
            this.currentUser = {
                id: '',
                username: '',
                roleId: this.roles.length > 0 ? this.roles[0].id : '',
                status: '1',
                password: '',
            };
            this.showSaveForm = true;
        },
        saveUser() {
            this.$axios
                .post('/user/save', this.currentUser)
                .then(response => {
                    if (response.data.success) {
                        this.$message.success('保存成功');
                        this.showSaveForm = false;
                        this.loadUsers();
                    }
                })
                .catch(error => {
                    console.error('保存用户失败', error);
                    this.$message.error('保存失败');
                });
        },
        resetForm() {
            this.currentUser = {
                id: '',
                username: '',
                roleId: '',
                status: '1',
                password: '',
            };
        },
    },
};
</script>

<style scoped>
.user-management {
    padding: 20px;
}
</style>